<template>

	<el-tree class="root" ref="reftree" :data="dats" :props="cfg" node-key="name" :expand-on-click-node="false"
		@check-change="hCheckChange" :render-content="hRender" />
</template>

<script setup>
	import {
		onMounted, //页面初始化
		onUnmounted, //页面卸载
		nextTick,
		computed,
		reactive,
		watch, //监控
		ref, //
		toRefs
	} from "vue";


	//事件抛出
	//外层绑定@onFn="hOnFn"
	const hEmit = defineEmits(['hU', 'onUnSave']);
	//触发
	const hOnFn = (t) => {
		hEmit('onFn', t);
	}

	const hFn = () => {

	}
	const cfg = {
		children: 'child'
	}
	//属性定义
	//数据绑定v-bind:dat="dat"  
	//const dat=ref({});
	const props = defineProps({
		dats: {
			type: Array
		},
		icon: {
			type: String,
			default: null
		}
	});

	const hRefTree = () => {
		console.log("刷新树", props.treeDat);
		hEmit('hU', 'GgetStructure', '', 'hOnTree');
	}

	const hCheckChange = (e, b) => {
		console.log("场景树选择", e,b);
		if (!b) {
			return;
		}
		 
	}


	//渲染标签树
	function hRender(h, {
		node,
		data,
		store
	}) {

		//文本
		var label = h('span', {
			class: "scene-name"
		}, data.name);
		// 	console.log("node", data); 
		/* 
				//前图标
				var ila = h('img', {
					src: data.ilast,
					class: style.uicon
				}, '');
				//后图标
				var ipr = h('img', {
					src: data.iprev,
					class: style.uicon
				}, '');

				//后按钮事件
				var ed = [];
				if (props.enabledit) {
					var btn = fnbtn(h, node, data);
					ed.push(btn);
				}

				//组合
				var hb = h(
					'div', {
						class: style.node
					}, ila, label, ipr, ...ed);
		*/
		var item;
		if (data.icon) {
			var icon = h('img', {
				src: data.icon
			});
			item = h('div', {
				class: 'item'
			}, icon, label);
		}
		return item || label;
	};

	function fnbtn(h, node, data) {
		var add = h('a', {
			onClick: () => {
				handleAppend(data)
			}
		}, '添加子类');

		var del = h('a', {
			onClick: () => {
				handleRemove(node, data);
			},
		}, '删除');
		var btns = h('span', {
			class: style.btn
		}, add, del);
		return btns;
	}
	//属性导出
	//使用方法 ref="rdom" rdom.value.hFn()
	defineExpose({
		hRefTree
	});
	onMounted(() => nextTick(() => {}));
	onUnmounted(() => {

	})

	//> path("M 800 400 L 400 150 L 300 150 L 300 250 L 700 500 L 300 750 L 300 850 L 400 850 L 800 600 L 850 550 L 850 450 L 800 400 ")
</script>

<style scoped lang="scss">
	:deep(.el-tree-node__expand-icon) {
		position: absolute;
		right: 0;
	}

	:deep(.el-tree-node__expand-icon.expanded) {
		// color: #6CDBB8;
	}

	:deep(.el-tree-node__expand-icon) {
		path {
			d: path("M 800 400 L 400 150 L 300 150 L 300 250 L 700 500 L 300 750 L 300 850 L 400 850 L 800 600 L 850 550 L 850 450 L 800 400 ") !important;
		}
	}

	:deep(.item) {
		display: flex; 
		align-items: center;

		img {
			height: 25px;
			padding:0 12px 0 6px;
			width: auto;
		}
	}

	:deep(.el-tree-node__content) {
		border-radius: 3px;
		background: none;
	}

	:deep(.el-tree-node.is-current .el-tree-node__content),
	:deep(.el-tree-node__content){
		height: 35px;
	}
	:deep(.el-tree-node__content):hover {
		background-color: #3786FD;
		color: white;
	}

	.root:not(.child) {
		padding-left: 0;
		margin-left: 20px;
	}

	.root {
		background: none;
		pointer-events: all;
		width: 100%;
		height: 100%;
	}
</style>

<style module>
	/**
	 * 类名会被打乱
	 *绑定方法   :class="[$style.fullscreen]"
	 *申明 .fullscreen 
   */
</style>